
import React from 'react';
import { connect } from 'dva';
import { Form, Row, Col, Button, Input, DatePicker, Select } from 'antd';
import 'moment/locale/zh-cn';
import { PAGE_SIZE } from '../../../constants/constants';

const FormItem = Form.Item;
const { create } = Form;
const { RangePicker } = DatePicker;
const { Option } = Select;

const formItemLayout = {
  labelCol: {
    sm: { span: 6 },
  },
  wrapperCol: {
    sm: { span: 18 },
  },
};

const dateItemLayout = {
  labelCol: {
    sm: { span: 4 },
  },
  wrapperCol: {
    sm: { span: 20 },
  },
};

@connect((state) => {
  return { ...state.nodeLog, loading: state.loadingBar === 1 };
})

@create()
export default class NodeLogPanel extends React.Component {

  handleReset = () => {
    this.props.form.resetFields();
  }

  handleQuery = () => {
    const { validateFields, getFieldsValue } = this.props.form;
    const { dispatch } = this.props;

    validateFields((errors) => {
      if (errors) {
        return;
      }
      const data = {
        ...getFieldsValue(),
      };
      const params = {
        pageNum: 1,
        pageSize: PAGE_SIZE,
        identity: data.identity,
        event: data.event,
      };
      if (data.queryTime) {
        params.startLogTime = data.queryTime[0];
        params.endLogTime = data.queryTime[1];
      }
      dispatch({
        type: 'nodeLog/queryNodeLogList',
        payload: params,
      });
    });
  }


  render = () => {
    const { loading } = this.props;
    const { getFieldDecorator } = this.props.form;
    return (
      <div className="spider-container">
        <div>
          <Form layout="vertical">
            <Row gutter={16}>
              <Col span={6}>
                <FormItem label="节点标识" style={{ marginBottom: 0 }} {...formItemLayout}>
                  {getFieldDecorator('identity')(
                    <Input size="default" type="text"/>,
                  )}
                </FormItem>
              </Col>

              <Col span={6}>
                <FormItem label="事件" style={{ marginBottom: 0 }} {...formItemLayout}>
                    {
                      getFieldDecorator('event',{initialValue:''})
                    (
                        <Select size="default" key="event" name="event">
                          <Option value="">全部</Option>
                          <Option value="ONLINE">上线</Option>
                          <Option value="OFFLINE">下线</Option>
                        </Select>
                    )
                    }
                </FormItem>
              </Col>
              <Col span={12}>
                <FormItem label="起始日期" style={{ marginBottom: 0 }} {...dateItemLayout}>
                  {getFieldDecorator('queryTime')(
                    <RangePicker placeholder={['开始时间', '结束时间']} showTime={{ format: 'HH:mm:ss' }} size="default" style={{ width: '100%' }} format="YYYY-MM-DD HH:mm:ss" />
                  )}
                </FormItem>
              </Col>

            </Row>
            <Row gutter={16}>
              <Col span={24} style={{ textAlign: 'right' }}>
                <FormItem style={{ marginBottom: 0, textAlign: 'right' }}>
                  <Button loading={loading} type="primary" size="default" onClick={this.handleQuery}>
                    查询
                  </Button>&nbsp;
                  <Button loading={loading} type="default" size="default" onClick={this.handleReset}>
                    重置
                  </Button>&nbsp;
                </FormItem>
              </Col>
            </Row>
          </Form>
        </div>
      </div>
    );
  }
}
